<template>
  <div>
<h2>
  添加页面
</h2>
<table border="1">
  <tr>
    <td>房型名称</td>
    <td>
      <input type="text" v-model="state.name">
    </td>
  </tr>
  <tr>
    <td>房型面积</td>
    <td>
      <input type="text" v-model="state.size">
    </td>
  </tr>
  <tr>
    <td>门店</td>
    <td>
    <select v-model="state.menDian">
      <option value="">请选择</option>
      <option value="顺义门店">顺义门店</option>
      <option value="昌平门店">昌平门店</option>
      <option value="上地门店">上地门店</option>
    </select>
    </td>
  </tr>
  <tr>
    <td>房型照片</td>
    <td>
      <input type="file" @change="img">
      <img :src="src" alt="" width="50" height="50" v-if="state.photo">
    </td>
  </tr>
  <tr>
    <td></td>
    <td>
      <input type="button" value="添加" @click="add">
    </td>
  </tr>
</table>
  </div>
</template>

<script setup lang="ts">
import { reactive,toRefs,onMounted } from 'vue';
import axios from 'axios';
import { useRoute,useRouter } from 'vue-router';
let route=useRoute();
let router=useRouter();
let data=reactive({
  state:{
    name:'',
    size:'',
    menDian:'',
    photo:'',
    state:'',
    isDelete:''
  },
  src:""
})
let {state,src}=toRefs(data)
function add()
{
  let obj={
  "name": state.value.name,
  "size": state.value.size,
  "menDian": state.value.menDian,
  "photo": state.value.photo,
  "state": 0,
  "isDelete": true
  }
  axios({
    url:'/api/Room/Add',
    method:'post',
    data:obj
  })
  .then(res=>{
    if(res.data.data==1)
  {
    alert("添加成功")
    router.push("../show")
  }
  else if(res.data.data==-1)
  {
   alert("房型名称不能重复")
  }
  else
  {
    alert("添加失败")
  }
  })
  .catch(err=>{

  })
}
//上传图片
const img=(e:any)=>{
var from=new FormData()
var obj=e.target.files[0];
from.append('file',obj)
axios({
  url:'/api/Photo/Uplor',
  method:'post',
  data:from
})
.then(res=>{
  src.value='https://localhost:7276'+res.data.filename;
  state.value.photo=res.data.filename
})
}








</script>

<style scoped>

</style>